﻿<template>
    <div>

        <div class="layui-row layui-col-space15 clearfix">
            <div class="layui-col-md8 left">
                <div data-fontsize="14" class="article-detail shadow">
                    <div class="article-tool">
                        <div style="float:left;">
                            <button class="layui-btn layui-btn-primary layui-btn-xs" title="发布日期">
                                {{news.Adddate}}
                            </button>
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="浏览">
                                    <i class="fa fa-eye fa-fw"></i><span style="margin-left:3px;">{{news.views}}</span>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="评论">
                                    <i class="fa fa-comments fa-fw"></i><span style="margin-left:3px;">0</span>
                                </button>
                            </div>
                        </div>
                        <div class="tool-box">
                            <div class="layui-btn-group layui-hide-xs">

                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体缩小">
                                    <i class="fa fa-minus fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体还原">
                                    <i class="fa fa-undo fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体放大">
                                    <i class="fa fa-plus fa-fw"></i>
                                </button>
                            </div>
                            <div class="layui-btn-group layui-hide-xs">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="展开阅读">
                                    <i class="fa fa-arrows-h fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="全屏阅读">
                                    <i class="fa fa-arrows-alt fa-fw"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="article-detail-title">
                        {{news.Title}}
                    </div>
                    <div class="article-detail-abstract">
                        <span class="layui-badge">摘要</span>
                        <span id="abstract">
                            {{news.Description}}
                        </span>
                    </div>
                    <div class="article-detail-content w-e-text">
                        <div v-html="news.Contents">

                        </div>
                        <div class="article-detail-copyright">
                            <p>版权声明：本文由<a href="/" style="color:#1E9FFF;margin:0 5px;">爱上歆随懿恫</a>原创出品，转载请注明出处！</p>
                            <p>本文链接：<a :href="'http://asxsyd92.com/news/newsdetail?id='+news.ID">http://www.asxsyd92.com/news/newsdetail?id={{news.ID}}</a></p>
                        </div>
                    </div>
                </div>
                <div class="article-component">
                    <div class="component-box">
                        <a href="javascript:;" class="praise" blog-event="praise"><i class="fa fa-thumbs-up fa-fw"></i>点赞（<span id="praiseCnt">0</span>）</a>
                        <a href="javascript:;" class="reword" blog-event="reword">赏</a>
                        <a href="javascript:;" class="share" blog-event="share"><i class="fa fa-share-alt fa-fw"></i>分享（<span id="shareCnt">0</span>）</a>
                    </div>
                </div>


                <div class="blog-card blog-card-padding shadow">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                        <legend>来说两句吧</legend>
                        <div class="layui-field-box">
                            <div class="layui-form blog-editor" a>

                                <div class="layui-form-item">
                                    <textarea style="display: none;" name="EditorContent" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn  " v-on:click="formRemark()">提交评论</button>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="blog-card-title">最新评论</div>
                    <div class="emptybox">
                        <div id="idted"></div>
                        <ul class="blog-comment" style="text-align: left;">
                            <li v-for="(item,index ) in conlist">
                                <div class="comment-parent">
                                    <a name="remark-49"></a>
                                    <img :src="item.Url" :alt="item.UserName">
                                    <div class="info">
                                        <span class="username">{{item.UserName}}</span>
                                    </div>
                                    <div class="content">
                                        <span v-html="item.Contents"></span>
                                    </div>
                                    <p class="info info-footer"><span class="time">{{item.AddTime}}</span><a href="javascript:;" class="btn-reply" v-on:click="Reply(item)">回复</a></p>
                                </div>
                                <div class="replycontainer layui-hide">
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <textarea name="replyContent" id="replyContent" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                                        </div>
                                        <div class="layui-form-item">
                                            <button class="layui-btn layui-btn-xs" v-on:click="formReply(item)">提交</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div id="newspage"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4 right">
                <div class="layui-row layui-col-space10">
                    <!--<div class="layui-col-sm6 layui-col-md12 padding0">
                        <div class="article-category shadow">
                            <div class="article-category-title">分类导航</div>
                            <a href="#">开发中</a>

                            <div class="clear"></div>
                        </div>
                    </div>-->
                    <div class="layui-col-sm6 layui-col-md12">
                        <div class="blog-card shadow">
                            <div class="blog-card-title">相似文章</div>
                            <ul class="blog-card-ul">
                                <li v-if="Lastarticle.isdata==true">
                                    <span class="layui-badge  ">下</span><a :href="'#/newsDetail/'+Lastarticle.data.ID" :title="Lastarticle.data.Title">{{Lastarticle.data.Title}}</a>
                                </li>
                                <li v-if="Nextarticle.isdata==true">
                                    <span class="layui-badge  ">上</span><a :href="'#/newsDetail/'+Nextarticle.data.ID" :title="Nextarticle.data.Title">{{Nextarticle.data.Title}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md12">
                        <div class="blog-card shadow">
                            <div class="blog-card-title">推荐阅读</div>
                            <ul class="blog-card-ul">
                                <li v-for="item in newslist">
                                    <span class="layui-badge  ">荐</span><a :href="'#/newsDetail/'+item.ID" :title="item.Title">{{item.Title}}</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md12">
                        <div class="blog-card shadow sr-rightmodule">
                            <div class="carousel-box" style="position:relative;background-color: #fff;overflow:hidden">
                                <div class="layui-carousel" id="_news_taobao">
                                    <div carousel-item="">

                                        <div v-for="pp in data">
                                            <a :href="pp.url" data-type="0" biz-itemid="null" data-tmpl="470x190" data-tmplid="635" data-rd="2" data-style="2" data-border="1" :title="pp.title" target="_blank">
                                                <img :src="pp.pict_url" style="width:100%;height:100%">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md12">
                        <div class="blog-card shadow sr-rightmodule">
                            <div class="blog-card-title">
                                <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe6c6;</i></span>
                                <span class="text">微信关注</span>
                            </div>
                            <ul class="blog-card-ul">
                                <li style="text-align: center;">
                                    <img src="/images/qrcode_for_gh_8044f5512351_258.jpg" />
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
            </div>
        </div>


        <!--遮罩-->
        <div class="blog-mask animated layui-hide"></div>
        <!--js-->

    </div>
</template>


<script type="text/javascript">
    layui.use(['layer', 'form', 'layedit', 'laypage'], function () {
        $ = layui.$;

        var form = layui.form, layedit = layui.layedit
            , device = layui.device(), laypage = layui.laypage;
        module.exports = {
            data() {
                var data = null;
                var _this = this;

                console.log(data)
                return {

                    news: [],
                    data: [],
                    Lastarticle: [],
                    Nextarticle: [],
                    isdata: [],
                    newslist: [],
                    conlist: []

                }
            }, mounted: function () {
                m = this;
                m.ajax();
            }, watch: {
                '$route'(to, from) { //监听路由是否变化
                    //这里需要清空评论
                    m.conlist = [];
                    //调数据
                    m = this;
                    m.ajax();
                    $('body,html').animate({ scrollTop: 0 }, 500);
                }
            },
            methods: {
                ajax: function () {
                
                        var lay = layer.msg('正在拼命加载...', { icon: 16, shade: 0.5, time: 20000000 });
                        fetch("/api/Article/GetNewDetails?id=" + this.$route.params.key).then((data) => data.text()).then((data) => {
                            var my = JSON.parse(data);
                            document.title = my.data.Title;
                            this.news = my.data;
                            this.Nextarticle = {
                                data: my.Nextarticle, isdata: my.Nextarticle == null ? false : true
                            };
                            this.Lastarticle = {
                                data: my.Lastarticle, isdata: my.Lastarticle == null ? false : true
                            }
                            layer.close(lay);
                        })
                    if (this.newslist.length <= 0) {
                        fetch("/api/Article/GetRandomNew?title=&page=" + 1 + "&limit=12").then((data) => data.text()).then((data) => {
                            var my = JSON.parse(data);

                            this.newslist = my.data;

                        })
                    }
                    var sj = "";
                    //获取淘宝推广减少请求次数
                    if (this.data.length <= 0) {
                        fetch("/api/taobao/TaoBaoSearch?title=" + sj + "&page=" + 1 + "&limit=12").then((data) => data.text()).then((data) => {
                            var my = JSON.parse(data);
                            this.data = my.data;

                            setTimeout(function () {
                                var carousel = layui.carousel;    //图片轮播
                                carousel.render({
                                    elem: '#_news_taobao'
                                    , width: '100%'
                                    , interval: 5000
                                });

                            }, 200);
                        })

                    }
                    //api/Article/GetContentList
                    fetch("/api/ApiData/GetCommonListByID?tab=A_Content&ID=" + this.$route.params.key + "&desc=AddTime desc&Status=0&page=" + 1 + "&limit=12").then((data) => data.text()).then((data) => {
                        var keys = this.$route.params.key;
                        var my = JSON.parse(data);
                        if (my.count == 0) {
                            $("#idted").html(' <p><i style="font-size:50px; color: #5fb878" class="layui-icon">&#xe705;</i></p> <p>暂无评论，大侠不妨来一发？</p>');
                            // return false;
                        }
                        this.conlist = my.data;
                        console.log(this.conlist);
                        laypage.render({
                            elem: 'newspage' //注意，这里的 test1 是 ID，不用加 # 号
                            , count: my.count //数据总数，从服务端得到
                            , jump: function (obj, first) {

                                page = obj.curr;  //改变当前页码
                                limit = obj.limit;
                                //首次不执行
                                if (!first) {
                                    //do something
                                    fetch("/api/ApiData/GetCommonListByID?tab=A_Content&ID=" + m.$route.params.key + "&desc=AddTime desc&Status=0&page=" + page + "&limit=" + limit).then((data) => data.text()).then((data) => {
                                        var my = JSON.parse(data);
                                        m.conlist = my.data;
                                        $('#idted').offseTop;
                                    });
                                }
                            }
                        });

                    })
                },
                Reply: function (_this) {

                    $container = $(".btn-reply").parent('p').parent().siblings('.replycontainer');
                    if ($(".btn-reply").text() == '回复') {
                        $container.find('textarea').attr('placeholder', '回复【' + _this.UserName + '】');
                        $container.removeClass('layui-hide');

                        $(".btn-reply").parents('.blog-comment li').find('.btn-reply').text('回复');
                        $(".btn-reply").text('收起');
                    } else {
                        $container.addClass('layui-hide');

                        $(".btn-reply").text('回复');
                    }
                }
                ,
                formReply: function (_this) {
                    if ($("#replyContent").val().length < 5) {
                        layer.msg("再多说两句！5个字以上！");
                        return false;
                    }
                    layer.msg("回复占时禁止提交！");
                    return false;
                    var lay = layer.msg('评论提交中...', { icon: 16, shade: 0.5, time: 20000000 });
                    $.post("api/Article/AddComment", { Artid: m.$route.params.key, Comment: $("#replyContent").val() }, function (data) {
                        layer.close(lay);
                        m.ajax();
                    }).error(function (ex) {
                        layer.close(lay);
                        layer.alert(ex.statusText);
                    })

                }, formRemark: function () {
                    var remarkEditors = layedit.getContent(remarkEditor)
                    if (remarkEditors.length < 5) {
                        layer.msg("再多说两句！5个字以上！");
                        return false;
                    }
                    var lay = layer.msg('评论提交中...', { icon: 16, shade: 0.5, time: 20000000 });
                    var arr = { ID: "00000000-0000-0000-0000-000000000000", Parentid: "00000000-0000-0000-0000-000000000000", ArtID: m.$route.params.key, Contents: remarkEditors, Status: 0, AddTime: "systime", UserName: "匿名" };

                    $.post("api/Article/AddComment", { data: JSON.stringify(arr) }, function (data) {
                        layer.close(lay);
                        m.ajax();

                    }).error(function (ex) {
                        layer.close(lay);
                        layer.alert(ex.statusText);
                    })
                    return false;
                }
            }
            , created() {

                console.log(layedit);
                setTimeout(function () {
                    remarkEditor = layedit.build("remarkEditor", {
                        height: 150,
                        tool: ["face", "|", "left", "center", "right", "|", "link"]
                    }); //建立编辑器
                    $('body,html').animate({ scrollTop: 0 }, 500);
                    $(function () {
                        /msie[6 | 7 | 8 | 9]/i.test(navigator.userAgent) || (window.sr = new ScrollReveal({
                            reset: !1
                        }), sr.reveal(".sr-left", {
                            origin: "left",
                            scale: 1,
                            opacity: .1,
                            duration: 1200
                        }), sr.reveal(".sr-bottom", {
                            scale: 1,
                            opacity: .1,
                            distance: "60px",
                            duration: 1e3
                        }), sr.reveal(".sr-listshow", {
                            distance: "30px",
                            duration: 1e3,
                            scale: 1,
                            opacity: .1
                        }), sr.reveal(".sr-rightmodule", {
                            origin: "top",
                            distance: "60px",
                            duration: 1e3,
                            scale: 1,
                            opacity: .1
                        }));
                        layer.photos({
                            photos: ".article-left",
                            anim: 5
                        });
                        layer.photos({
                            photos: ".article-detail-content",
                            anim: 5,
                            move: !1
                        })
                    });
                    prettyPrint();

                    //文章顶部工具栏按钮点击事件
                    $('.tool-box button').on('click', function () {
                        var title = $(this).attr('title');
                        switch (title) {
                            case '全屏阅读':
                                var content = $('.article-detail').prop("outerHTML");
                                layer.open({
                                    title: false,
                                    type: 1,
                                    content: content,
                                    closeBtn: 0,
                                    scrollbar: false,
                                    area: ['100vw', '100vh'],
                                    success: function (layero, index) {
                                        $(layero).find('.article-tool').html('<div class="tool-box"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary layui-btn-xs" title="关闭全屏"><i class="fa fa-compress fa-fw"></i></button></div></div>');
                                        $(layero).find('.article-tool button').on('click', function () {
                                            layer.close(index);
                                        });
                                    }
                                });
                                break;
                            case '展开阅读':
                                $('.right').hide();
                                $('.left').css({
                                    'width': '100%'
                                });
                                $(this).attr('title', '收缩阅读');
                                $(this).html('<i class="fa fa-compress fa-fw"></i>');
                                break;
                            case '收缩阅读':
                                $('.right').show();
                                $('.left').css('width', '');
                                $(this).attr('title', '展开阅读');
                                $(this).html('<i class="fa fa-arrows-h fa-fw"></i>');
                                break;
                            case '字体缩小':
                                var fontsize = Number($('.article-detail').data('fontsize'));
                                fontsize = fontsize - 1;
                                if (fontsize < 12) fontsize = 12;
                                $('.article-detail').data('fontsize', fontsize);
                                $('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
                                break;
                            case '字体还原':
                                $('.article-detail').data('fontsize', 14);
                                $('.article-detail-abstract,.article-detail-content').css('font-size', '');
                                break;
                            case '字体放大':
                                var fontsize = Number($('.article-detail').data('fontsize'));
                                fontsize = fontsize + 1;
                                if (fontsize > 20) fontsize = 20;
                                $('.article-detail').data('fontsize', fontsize);
                                $('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
                                break;
                            case '静音':
                                $(this).attr('title', '开启');
                                $(this).html('<i class="fa fa-volume-off fa-fw"></i>');
                                ap.volume(0, false);
                                break;
                            case '开启':
                                $(this).attr('title', '静音');
                                $(this).html('<i class="fa fa-volume-up fa-fw"></i>');
                                ap.volume(0.5, false);
                                break;
                            default:
                        }
                    });

                    //回复按钮点击事件
                    $('.btn-reply').on('click', function () {
                        var targetId = $(this).data('targetid')
                            , targetName = $(this).data('targetname')
                            , $container = $(this).parent('p').parent().siblings('.replycontainer');
                        if ($(this).text() == '回复') {
                            $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
                            $container.removeClass('layui-hide');
                            $container.find('input[name="targetUserId"]').val(targetId);
                            $(this).parents('.blog-comment li').find('.btn-reply').text('回复');
                            $(this).text('收起');
                        } else {
                            $container.addClass('layui-hide');
                            $container.find('input[name="targetUserId"]').val(0);
                            $(this).text('回复');
                        }
                    });

                    //监听留言回复提交
                    form.on('submit(formReply)', function (data) {
                        if ($(data.elem).hasClass('layui-btn-disabled')) {
                            return false;
                        }
                        var index = layer.load(1);
                        $.ajax({
                            type: 'post',
                            url: '/api/article/reply',
                            data: data.field,
                            success: function (res) {
                                layer.close(index);
                                if (res.code === 1) {
                                    layer.msg(res.msg, { icon: 6 });
                                    setTimeout(function () {
                                        location.reload(true);
                                    }, 500);
                                } else {
                                    if (res.msg != undefined) {
                                        layer.msg(res.msg, { icon: 5 });
                                    } else {
                                        layer.msg('程序异常，请重试或联系作者', { icon: 5 });
                                    }
                                }
                            },
                            error: function (e) {
                                layer.close(index);
                                layer.msg("请求异常", { icon: 2 });
                            }
                        });
                        return false;
                    });
                    var events = {
                        //分享
                        share: function () {
                            shareIndex = layer.open({
                                type: 1,
                                shade: 0.6,
                                shadeClose: true,
                                area: ['auto', '50px'],
                                resize: false,
                                skin: 'share',
                                closeBtn: 0,
                                anim: 1,
                                title: false, //不显示标题
                                content: $('.bdsharebuttonbox')
                            });
                        }

                        //点赞
                        , praise: function () {
                            var localdata = layui.data('blog')
                                , articleId = $('#hidArticleId').val()
                                , self = this;
                            if (localdata['praise' + articleId]) {
                                layer.tips('你已点过赞了，若收获颇大，可打赏作者！^_^', self, { tips: 1, time: 2000 });
                                return;
                            }
                            $.post('/api/article/praiseorshare', { articleId: articleId, type: 'praise' }, function (res) {
                                if (res.code === 1) {
                                    layui.data('blog', {
                                        key: 'praise' + $('#hidArticleId').val()
                                        , value: true
                                    });
                                    //点赞+1
                                    var cnt = Number($('#praiseCnt').text()) + 1;
                                    $('#praiseCnt').text(cnt);
                                    layer.tips('Thank you ^_^', self, { tips: 1, time: 2000 });
                                } else {
                                    layer.msg('点赞出错啦！0.0');
                                }
                            });
                        }

                        //打赏
                        , reword: function () {
                            layer.tab({
                                area: ['auto', '373px'],
                                shade: 0.6,
                                tab: [
                                    {
                                        title: '微信',
                                        content: '<img style="width:330px;height:330px;" src="images/wx.jpg" />'
                                    }, {
                                        title: '支付宝',
                                        content: '<img style="width:330px;height:330px;" src="images/zfb.jpg" />'
                                    }]
                            });

                        }
                    };

                    $('*[blog-event]').on('click', function () {
                        var eventName = $(this).attr('blog-event');
                        events[eventName] && events[eventName].call(this);
                    });

                    $('*[blog-event="reword"]').on('mouseover', function () {
                        layer.tips('一元足以感动我 ^_^', this, { tips: 1, time: 2000 });
                    });
                    $(".category-toggle").click(function (e) {
                        e.stopPropagation();
                        openlife()
                    });
                    function openlife() {
                        $(".category-toggle").addClass("layui-hide");
                        $(".article-category").unbind("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend");
                        $(".article-category").removeClass("categoryOut");
                        $(".article-category").addClass("categoryIn");
                        $(".article-category").addClass("layui-show")
                    }
                    function loselife() {
                        $(".article-category").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
                            function () {
                                $(".article-category").removeClass("layui-show");
                                $(".category-toggle").removeClass("layui-hide")
                            });
                        $(".article-category").removeClass("categoryIn");
                        $(".article-category").addClass("categoryOut")
                    }
                    $(".blog-body,.blog-footer").click(function () {
                        loselife();
                    });
                    $(".article-category").click(function () {
                        loselife();
                    });
                }, 200);






            }

        }


    });


</script>


